import {
  Card,
  Breadcrumb,
  Form,
  Select,
  Button,
  Input,
  Space,
  Radio,
  Upload,
  message,
} from "antd"
import { useState, useEffect } from "react"
import { Link } from "react-router-dom"
import { useChannels } from "@/utils/g_hooks"
import { PlusOutlined } from "@ant-design/icons"
import ReactQuill from "react-quill"
import "react-quill/dist/quill.snow.css"
import http from "@/utils/http"
import { useHistory, useParams } from "react-router-dom"

import styles from "./index.module.scss"
const Publish = () => {
  // 频道数据
  const [form] = Form.useForm() // 使用Form的hook得到一个form对象
  const params = useParams() // 拿到动态路由参数
  const channels = useChannels() // 通过自定义hook获取频道数据
  const history = useHistory()
  const [type, setType] = useState(1) // 默认值为单图
  const [fileList, setFileList] = useState([]) // 将upload受控
  const onTypeChange = (event) => {
    setType(event.target.value) // 形成了数据的双向绑定
    setFileList([]) // 只要切换类型就清空封面
  }
  // 文件上传发生变化
  const onUploadChange = ({ fileList }) => {
    //将参数设置给 对象
    setFileList(fileList) // 将数据同步到状态上
  }

  // 定义校验通过的事件
  const onFinish = async (values, draft = false) => {
    // console.log(values)
    // 看接口需要哪些数据 => 将数据进行处理 => 提交
    // 类型和图片的判断
    if (fileList.length !== type) {
      message.warning("封面类型和上传图片不符合")
      return
    }
    const data = {
      ...values, // 三个字字段
      cover: {
        type, // 当前类型
        images: fileList.map((item) => item?.response?.data?.url || item.url),
        // images:  // 编辑的时候 图片有可能不是新增-有可能 是已经上传过的图片
      },
    }
    // 判断当前是新增还是编辑
    if (params.id) {
      // 编辑
      // 调用编辑
      await http.put("/mp/articles/" + params.id + "?draft=" + draft, data)
    } else {
      // 新增
      // 提交
      // 发起新增请求
      await http.post("/mp/articles?draft=" + draft, data)
    }
    message.success("操作成功")
    // 跳转到列表页面
    history.push("/home/article")
  }

  useEffect(() => {
    const setFormData = async () => {
      if (params.id) {
        // 如果id存在-通过id获取文章的详情- 设置给表单
        const result = await http.get(`/mp/articles/${params.id}`)
        // 将数据设置给表单
        form.setFieldsValue(result) // 设置表单数据
        const { cover } = result
        setType(cover.type) // 设置类型
        // 设置文件列表
        setFileList(cover.images.map((url) => ({ url })))
        // upload => fileList => [{ url: '' }] => 正常显示图片
      } else {
        // 如果没有id 要处理一下数据
        setType(1) // 将封面重置为1
        setFileList([])
        form.resetFields() // 重置字段
      }
    }
    setFormData()
  }, [params, form])
  // 存草稿的方法
  const saveDraft = async () => {
    // 草稿- 和正式发布有什么区别
    // 就是一个参数的区别
    // 和  draft = true 草稿
    // 不传  draft = false 正式文章
    const values = await form.validateFields() // form绑定了表单 先校验表单- 校验通过 - 表单数据
    onFinish(values, true) // 存草稿了
  }
  return (
    <div className={styles.root}>
      <Card
        title={
          <Breadcrumb>
            <Breadcrumb.Item>
              <Link to="/">首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>
              <Link to="/article">内容管理</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>发布文章</Breadcrumb.Item>
          </Breadcrumb>
        }
      >
        <Form form={form} onFinish={onFinish} labelCol={{ span: 4 }}>
          <Form.Item
            label="文章标题："
            name="title"
            rules={[
              {
                required: true,
                message: "文章标题不能为空",
              },
            ]}
          >
            <Input placeholder="请输入文章标题" style={{ width: 400 }} />
          </Form.Item>
          <Form.Item
            label="所属频道："
            name="channel_id"
            rules={[
              {
                required: true,
                message: "所选频道不能为空",
              },
            ]}
          >
            <Select style={{ width: 400 }}>
              {channels.map((item) => {
                return (
                  <Select.Option key={item.id} value={item.id}>
                    {item.name}
                  </Select.Option>
                )
              })}
            </Select>
          </Form.Item>
          <Form.Item label="封面：">
            <Radio.Group value={type} onChange={onTypeChange}>
              <Radio value={1}>单图</Radio>
              <Radio value={3}>三图</Radio>
              <Radio value={0}>无图</Radio>
            </Radio.Group>
            {/* 放置封面-封面需要上面的类型决定 */}
            {type > 0 && (
              <div style={{ marginTop: 20 }}>
                <Upload
                  onChange={onUploadChange}
                  listType="picture-card"
                  name="image"
                  action="https://toutiao.itheima.net/v1_0/upload"
                  fileList={fileList}
                >
                  {/* 只有 单图- 0 张才可以上传 */}
                  {/* 三图- 当已经上传图片 < 3 才可以上传 */}
                  {fileList.length < type && <PlusOutlined></PlusOutlined>}
                </Upload>
              </div>
            )}
          </Form.Item>
          <Form.Item
            rules={[
              {
                required: true,
                message: "文章内容不能为空",
              },
            ]}
            label="内容："
            name="content"
            initialValue=""
          >
            <ReactQuill></ReactQuill>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 4 }}>
            <Space>
              <Button type="primary" htmlType="submit">
                发表文章
              </Button>
              <Button onClick={saveDraft}>存草稿</Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default Publish
